<template>
  <aside class="sidebar">
    <button class="new-task-btn">+ 新建任务 Ctrl + K</button>
    <ul class="task-list">
      <li class="task-item">全部</li>
      <li class="task-item">收藏</li>
      <li class="task-item">已定时</li>
    </ul>
    <div class="task-info">
      <!-- <img src="task-icon.png" alt="任务图标" class="task-icon" /> -->
      <div class="task-text">
        <p>分析AI员工可行性及快速获客...</p>
        <p>17:56 员工可行性分析与客户获取策略...</p>
      </div>
    </div>
  </aside>
</template>

<style scoped>
.sidebar {
  width: 378px;
  background-color: #031533;
  color: #fff;
  padding: 16px;
}
.new-task-btn {
  width: 100%;
  height: 40px;
  background-color: #2980b9;
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}
.task-item {
  padding: 8px 0;
  cursor: pointer;
}
.task-item:hover {
  background-color: #2c3e50;
}
.task-info {
  display: flex;
  align-items: center;
  margin-top: 16px;
}
.task-icon {
  width: 32px;
  height: 32px;
}
.task-text {
  margin-left: 8px;
}
</style>
